<template>
	<div class="course">
		<div class="course_wrap">
			<img class="course_wrap_img" :src="img">
			<div class="course_wrap_state">
				<div class="circle">
					<div class="pie_left">
						<div class="left"></div>
					</div>
					<div class="pie_right">
						<div class="right"></div>
					</div>
					<div class="mask">
						<span class="pro">25</span>%
					</div>
				</div>
				<p class="state_text">已经学习</p>
			</div>
			<div class="course_wrap_content">
				<p class="course_wrap_content_title">{{title}}</p>
				<p class="course_wrap_content_info">{{info}}</p>
			</div>
			
		</div>
	</div>
</template>

<script>
export default {
	name:'course',
	data(){
		return {
			img:require('../../assets/images/8.jpg'),
			title:'JavaScript/jquery核心技术大揭秘',
			info:'继续学习：第25节 javascript基础'
		}
	}
}
window.onload = function(){
	// var circle_list = Array.prototype.slice.call(document.getElementsByClassName('circle'));
	// for(let i=0,len=circle_list.length; i<len; i++){
	// 	console.log(circle_list[i])
	// }
	// var pro = parseInt()
	var proEle_list = Array.prototype.slice.call(document.getElementsByClassName('pro'));

	var rightEle_list = document.getElementsByClassName("right");
	var leftEle_list = document.getElementsByClassName("left");

	var right_angle_list = [];
	var left_angle_list = [];

	var right_speed_list = [];
	var left_speed_list = [];


	var pro_list = []
	for(var i=0,len=proEle_list.length; i<len; i++){
		pro_list.push(proEle_list[i].innerText);
		circle(leftEle_list[i], rightEle_list[i], pro_list[i])
	}
	
	// for(let i=0,len=proEle_list.length; i<len; i++){
	// 	setTimeout(function(){
	// 		rightEle_list[i].style.transition = 'all ' + right_speed_list[i] + 'ms linear'
	// 		rightEle_list[i].style.transform = 'rotate(' + right_angle_list + 'deg)'
	// 		setTimeout(function(){
	// 			leftEle_list[i].style.transition = 'all ' + left_speed_list[i] + 'ms linear'
	// 			leftEle_list[i].style.transform = 'rotate(' + left_angle_list + 'deg)'
	// 		},right_speed_list[i])
	// 	})
	// }

}

function circle(leftEle, rightEle, pro){
	var rightAngle = pro >= 50 ? 180 : (pro%50)*180/50;
	var leftAngle = pro <= 50 ? 0 : (pro-50)*180/50;

	var  rightSpeed = rightAngle*500/180; //1圈1s  单位：ms
	var  leftSpeed = leftAngle*500/180; //1圈1s  单位：ms


	setTimeout(function(){
		rightEle.style.transition = `all  +${rightSpeed}+ ms linear`
		rightEle.style.transform = `rotate( +${rightAngle}+ deg)`
		setTimeout(function(){
			leftEle.style.transition = `all  +${leftSpeed}+ ms linear`
			leftEle.style.transform = `rotate( +${leftAngle}+ deg)`
		},leftSpeed)
	})
}



</script>

<style scoped>
.course{
	padding:0.4rem 0;
	border-bottom: 1px solid #e1e1e1;
	overflow: hidden;
}
.course_wrap{
	width: 100%;
}
.course_wrap_img{
	width: 3rem;
	float:left;
}
.course_wrap_content{
	/*width: 45%;*/
	margin-left:3.2rem;	
	margin-right:2rem;
	box-sizing: border-box;
}
.course_wrap_content_title{
	font-size:0.4rem;
	line-height:0.5rem;
	height:1rem;
	text-overflow:ellipsis;		/* 超出部分用省略号 */
    overflow: hidden;

	/*只在weibkit有效果*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.course_wrap_content_info{
	width: 100%;
	color:#777;
	font-size:0.34rem;
	line-height:1.6;
	white-space:nowrap; 
	text-overflow:ellipsis;		/* 超出部分用省略号 */
    overflow: hidden;
}
.course_wrap_state{
	float:right;
	width: 1.8rem;
}

/*------------------------------------------*/
/*环形进度*/
.circle, .pie_left, .left, .pie_right, .right{
	width: 1.4rem;
	height: 1.4rem;
}
.circle{
	position: relative;
	margin:0 0.3rem;
	background-color: rgba(24,142,238,.5);
	border-radius: 50%;
}
.pie_left{
	clip: rect(0px,0.7rem,auto,0px);
	position: absolute;
	top: 0;
	left:0;
}
.left{
	
	clip: rect(0px,0.7rem,auto,0px);
	transform: rotate(0deg);
	background-color: #fff;
	border-radius: 50%;
	position:absolute;
	top: 0;
	left:0;
}
.pie_right{
	
	clip: rect(0px,auto,auto,0.7rem);
	position: absolute;
	top: 0;
	left:0;
}
.right{
	clip: rect(0px,auto,auto,0.7rem);
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.mask{
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius:50%;
	background-color: #fff;
	text-align:center;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	color: rgba(24,142,238,.5);
}
.mask:before{
	content:'';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.state_text{
	font-size:0.32rem;
	text-align:center;
	color: rgba(24,142,238,.5);
}
/*------------------------------------------*/

</style>